<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>OpenLayers 加载佛山地图4326-Demo</title>
    <script src="../lib/ol4/ol4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <style type="text/css">
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            left: 0;
            top: 0;
        }
    </style>

</head>
<body>
<div id="map" class="map"></div>
<script>
    const projection = ol.proj.get('EPSG:4326');
    projection.setExtent([-180, -90, 180, 90]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const size = ol.extent.getWidth(projectionExtent) / tileSize;


    const center = [
        (112.38089036582294 + 113.39020412865817) / 2,
        (22.64474851232277 + 23.575946433564027) / 2
    ];
    console.log(center);

    /*const resolutions = [
        1.440757911807387,
        0.70312500000000022,
        0.35156250000000011,
        0.17578125000000006,
        0.087890625000000028,
        0.043945312500000014,
        0.021972656250000007,
        0.010986328125000003,
        0.0054931640625000017,
        0.0027465820312500009,
        0.0013732910156250004,
        0.00068664550781250022,
        0.00034332275390625011,
        0.00017166137695312505,
        0.000085830688476562527,
        0.000042915344238281264,
        0.000021457672119140632,
        0.000010728836059570316,
        0.0000053644180297851579,
        0.000002682209014892579,
        0.0000013411045074462895
    ];*/

    const resolutions = new Array(20);
    for (let z = 0; z < 21; ++z) {
        resolutions[z] = size / Math.pow(2, z);
    }
    console.log(resolutions);

    const matrixIds = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        10,
        11,
        12,
        13,
        14,
        15,
        16,
        17,
        18,
        19,
        20
    ];

    const origin = [-180, 90];

    const tileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds
    });

    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山市2017年影像图（省厅17年12月下发）_WMTS_2000113/65c395ced272084b4b4c467ea23e9de8
    //       http://19.128.104.232:12345/ServiceAccess/WMTS/佛山电子地图_2018_WMTS_CGCS2000/65c395ced272084b4b4c467ea23e9de8

    const map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.WMTS({
                    name: '佛山地图',
                    url:
                        'http://19.128.104.232:12345/ServiceAccess/WMTS/佛山电子地图_2018_WMTS_CGCS2000/65c395ced272084b4b4c467ea23e9de8',
                    matrixSet: 'default',
                    format: 'image/png',
                    layer: 'FSMAP2018_CGCS2000',
                    projection: projection,
                    tileGrid: tileGrid,
                    style: 'default',
                    wrapX: false
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: center,
            projection: projection,
            zoom: 11,
            maxZoom: 20,
            minZoom: 1,
            resolutions
        })
    });
</script>
</body>
</html>
